<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仪表盘 - 资讯分析工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#722ED1',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#4E5969',
                        'neutral-light': '#C9CDD4'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-gray-800 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <a href="/" class="flex-shrink-0 flex items-center">
                        <i class="fa fa-line-chart text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-primary">资讯分析工具</span>
                    </a>
                    <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                        <a href="/dashboard?api_key={{ api_key }}" class="border-b-2 border-primary text-sm font-medium text-primary px-1 pt-1 inline-flex items-center">
                            <i class="fa fa-dashboard mr-1"></i>仪表盘
                        </a>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="relative mr-3">
                        <button type="button" class="flex items-center text-sm font-medium text-gray-700 hover:text-primary focus:outline-none">
                            <span class="mr-2">欢迎, {{ username }}</span>
                            <i class="fa fa-user-circle text-primary text-xl"></i>
                        </button>
                    </div>
                    <a href="/login" class="text-sm font-medium text-gray-700 hover:text-primary px-3 py-2 rounded-md transition-custom">
                        <i class="fa fa-sign-out mr-1"></i>退出
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="flex-grow p-4 sm:p-6 lg:p-8">
        <div class="max-w-7xl mx-auto">
            <!-- 欢迎信息 -->
            <div class="mb-8">
                <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900">资讯分析仪表盘</h1>
                <p class="mt-2 text-lg text-gray-600">分析网络资讯，洞察热点趋势</p>
            </div>

            <!-- 快速统计卡片 -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="bg-white rounded-xl shadow-sm p-6 card-hover border-l-4 border-primary">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-500">总分析任务</p>
                            <h3 class="text-2xl font-bold text-gray-900 mt-1">{{ tasks|length }}</h3>
                        </div>
                        <div class="bg-primary/10 p-3 rounded-lg">
                            <i class="fa fa-tasks text-primary text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-6 card-hover border-l-4 border-green-500">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-500">成功完成</p>
                            <h3 class="text-2xl font-bold text-gray-900 mt-1">{{ tasks|selectattr("status", "equalto", "completed")|list|length }}</h3>
                        </div>
                        <div class="bg-green-500/10 p-3 rounded-lg">
                            <i class="fa fa-check-circle text-green-500 text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-6 card-hover border-l-4 border-yellow-500">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-500">进行中</p>
                            <h3 class="text-2xl font-bold text-gray-900 mt-1">{{ tasks|selectattr("status", "equalto", "pending")|list|length }}</h3>
                        </div>
                        <div class="bg-yellow-500/10 p-3 rounded-lg">
                            <i class="fa fa-spinner text-yellow-500 text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-6 card-hover border-l-4 border-red-500">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-500">失败</p>
                            <h3 class="text-2xl font-bold text-gray-900 mt-1">{{ tasks|selectattr("status", "equalto", "failed")|list|length }}</h3>
                        </div>
                        <div class="bg-red-500/10 p-3 rounded-lg">
                            <i class="fa fa-exclamation-circle text-red-500 text-xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分析表单 -->
            <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
                <h2 class="text-xl font-bold text-gray-900 mb-4">新建分析任务</h2>
                <form id="analysis-form" class="space-y-4">
                    <div class="flex flex-col sm:flex-row sm:items-center sm:space-x-4">
                        <div class="flex-1">
                            <label for="url" class="block text-sm font-medium text-gray-700 mb-1">输入网址</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-globe text-gray-400"></i>
                                </div>
                                <input type="url" id="url" name="url" placeholder="https://example.com" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary" required>
                            </div>
                        </div>
                        <div class="mt-4 sm:mt-0">
                            <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-custom">
                                <i class="fa fa-play-circle mr-2"></i>开始分析
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- 任务列表 -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold text-gray-900">分析任务历史</h2>
                    <div class="text-sm text-gray-500">
                        显示 {{ tasks|length }} 个任务
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">任务ID</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">URL</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">完成时间</th>
                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for task in tasks %}
                            <tr class="hover:bg-gray-50 transition-custom">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#{{ task.id }}</td>
                                <td class="px-6 py-4 text-sm text-gray-500 max-w-xs truncate">
                                    <a href="{{ task.url }}" target="_blank" class="text-primary hover:underline">{{ task.url }}</a>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {% if task.status == 'completed' %}
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                        已完成
                                    </span>
                                    {% elif task.status == 'pending' %}
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                        进行中
                                    </span>
                                    {% else %}
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                        失败
                                    </span>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ task.created_at }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ task.completed_at or '-' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    {% if task.status == 'completed' %}
                                    <a href="/tasks/{{ task.id }}/result?api_key={{ api_key }}" class="text-primary hover:text-primary/80 transition-custom">
                                        <i class="fa fa-bar-chart mr-1"></i>查看结果
                                    </a>
                                    {% elif task.status == 'pending' %}
                                    <span class="text-gray-400 cursor-not-allowed">
                                        <i class="fa fa-spinner fa-spin mr-1"></i>等待中
                                    </span>
                                    {% else %}
                                    <span class="text-red-500 cursor-not-allowed">
                                        <i class="fa fa-exclamation-circle mr-1"></i>分析失败
                                    </span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                {% if not tasks %}
                <div class="py-10 text-center">
                    <div class="flex justify-center">
                        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
                            <i class="fa fa-file-text-o text-gray-400 text-2xl"></i>
                        </div>
                    </div>
                    <h3 class="mt-4 text-sm font-medium text-gray-900">暂无分析任务</h3>
                    <p class="mt-2 text-sm text-gray-500">创建你的第一个分析任务，开始探索网络资讯</p>
                </div>
                {% endif %}
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="text-sm text-gray-500">
                    © 2025 资讯分析工具. 保留所有权利.
                </div>
                <div class="mt-4 md:mt-0 flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-primary transition-custom">
                        <i class="fa fa-weibo"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-custom">
                        <i class="fa fa-wechat"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-custom">
                        <i class="fa fa-github"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
    document.getElementById('analysis-form').addEventListener('submit', async function(e) {
    e.preventDefault();

    const url = document.getElementById('url').value;
    const api_key = "{{ api_key }}";

    // 简单验证
    if (!url) {
        alert('请输入网址');
        return;
    }

    try {
        // 显示加载状态
        const submitButton = e.target.querySelector('button[type="submit"]');
        const originalHtml = submitButton.innerHTML;
        submitButton.disabled = true;
        submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>分析中...';

        // 发送分析请求
        const response = await fetch('/api/analyze', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                url: url,
                api_key: api_key
            })
        });

        const data = await response.json();

        if (response.ok) {
            alert('分析任务已创建！页面将在几秒后刷新');
            // 5秒后刷新页面
            setTimeout(() => {
                window.location.reload();
            }, 5000);
        } else {
            alert(data.detail || '创建任务失败');
        }
    } catch (error) {
        console.error('分析过程中出错:', error);
        alert('分析过程中出错，请稍后再试');
    } finally {
        // 恢复按钮状态
        const submitButton = e.target.querySelector('button[type="submit"]');
        submitButton.disabled = false;
        submitButton.innerHTML = originalHtml;
    }
});
    </script>
</body>
</html>